/*
* 基础tab页面
* */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';
const Icon=require('react-native-vector-icons/Ionicons');

import Messages from './Messages';
import Community from './Community';
import MailList from './MailList';
import Account from './Account';
import Home from './Home';

export default class Basic extends Component {

    constructor(props) {
        super(props);   //这一句不能省略，照抄即可
        this.state = {
            selectedTab:'home'
        };
    }

    render() {
        return (
            <TabNavigator>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'messages'}
                    title="消息"
                    badgeText=""
                    renderIcon={() => <Icon style={styles.tab}  name="ios-chatboxes-outline" color="#808080"  size={20}/>}
                    renderSelectedIcon={() => <Icon style={styles.tab}  name="ios-chatboxes" color="#4F8EF7"  size={20}/>}
                    onPress={() => this.setState({ selectedTab: 'messages' })}>
                   <Messages navigator={this.props.navigator}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'maillist'}
                    title="通讯录"
                    renderIcon={() => <Icon style={styles.tab}  name="ios-people-outline" color="#808080"  size={20}/>}
                    renderSelectedIcon={() => <Icon style={styles.tab}  name="ios-people" color="#4F8EF7"  size={20}/>}

                    onPress={() => this.setState({ selectedTab: 'maillist' })}>
                    <MailList navigator={this.props.navigator}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'home'}
                    title="主页"
                    renderIcon={() => <Icon style={styles.tab}  name="ios-home-outline" color="#808080"  size={20}/>}
                    renderSelectedIcon={() => <Icon style={styles.tab}  name="ios-home" color="#4F8EF7"  size={20}/>}
                    onPress={() => this.setState({ selectedTab: 'home' })}>
                    <Home navigator={this.props.navigator}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'community'}
                    title="社区"
                    renderIcon={() => <Icon style={styles.tab}  name="ios-aperture-outline" color="#808080"  size={20}/>}
                    renderSelectedIcon={() => <Icon style={styles.tab}  name="ios-aperture" color="#4F8EF7"  size={20}/>}
                    onPress={() => this.setState({ selectedTab: 'community' })}>
                    <Community navigator={this.props.navigator}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'account'}
                    title="账户"
                    renderIcon={() => <Icon style={styles.tab}  name="ios-settings-outline" color="#808080"  size={20}/>}
                    renderSelectedIcon={() => <Icon style={styles.tab}  name="ios-settings" color="#4F8EF7"  size={20}/>}
                    onPress={() => this.setState({ selectedTab: 'account' })}>
                    <Account navigator={this.props.navigator}/>
                </TabNavigator.Item>
            </TabNavigator>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tab:{
        height:20,
        width:30,
        textAlign:'center'
    }
});

